<template>
  <section class="course-section">
    <header class="course-section__header">
      <h2>{{ title }}</h2>
      <p>{{ subtitle }}</p>
    </header>
    <div class="course-section__grid course-section__grid--courses">
      <article
        class="course-card"
        v-for="course in courses"
        :key="course.id"
        role="button"
        tabindex="0"
        @click="emit('course-select', course.id)"
        @keyup.enter="emit('course-select', course.id)"
        @keyup.space.prevent="emit('course-select', course.id)"
      >
        <div class="course-card__media">
          <img :src="course.coverImage" :alt="course.title" loading="lazy" />
          <span class="course-card__tag" v-if="course.highlightTag">{{ course.highlightTag }}</span>
        </div>
        <div class="course-card__body">
          <h3 class="course-card__title">{{ course.title }}</h3>
          <p class="course-card__desc">{{ course.description }}</p>
          <div class="course-card__meta">
            <span>{{ course.instructorName }}</span>
            <span>{{ course.priceLabel }}</span>
          </div>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import type { CourseItem } from '../../types/course/Course.ts'

defineOptions({
  name: 'CourseFeaturedSection',
})

const emit = defineEmits<{
  (e: 'course-select', courseId: string): void
}>()

const props = defineProps<{
  title: string
  subtitle: string
  courses: CourseItem[]
}>()

const { title, subtitle, courses } = toRefs(props)
</script>

<style scoped>
.course-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.course-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-section__header h2 {
  font-size: 28px;
  font-weight: 700;
}

.course-section__header p {
  font-size: 16px;
  color: #6b7280;
}

.course-section__grid {
  display: grid;
  gap: 24px;
}

.course-section__grid--courses {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.course-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  outline: none;
}

.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 48px rgba(15, 23, 42, 0.12);
}

.course-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(60, 101, 245, 0.35);
}

.course-card__media {
  position: relative;
}

.course-card__media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.course-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
}

.course-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.course-card__title {
  font-size: 20px;
  line-height: 1.4;
}

.course-card__desc {
  color: #6b7280;
  font-size: 15px;
  line-height: 1.6;
}

.course-card__meta {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #374151;
}
</style>
